<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="6" :sm="24">
              <a-form-item label="模块名称">
                <a-input v-model="queryParam.name" placeholder="模块名称" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="表id">
                <a-input v-model="queryParam.table_id" placeholder="表id" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-button
                type="primary"
                @click="fetchsearch({ pageSize: 10, ...queryParam })"
              >
                查询
              </a-button>
              <a-button
                style="margin-left: 8px"
                @click="() => (queryParam = {})"
              >
                重置
              </a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <div style="margin: 0 0 10px 0">
        <a-space size="small">
          <a-button v-action:vmenu:add @click="add()">添加</a-button>
          <!-- <a-button v-action:vmenu:edit type="primary" @click="edits()"
            >编辑</a-button
          > -->
          <a-button
            v-action:vmenu:del
            type="danger"
            @click="dels()"
          >
            删除
          </a-button>
        </a-space>
      </div>

      <a-table
        :row-key="(record, index) => {return record.id}"
        :row-selection="rowSelection"
        :columns="columns"
        :data-source="data"
        :pagination="pagination"
        :loading="loading"
        @change="handleTableChange"
        bordered
      >
        <template slot-scope="text, record, index">
          <div>
            {{ text }}
          </div>
        </template>
          <template slot="dataIndex" slot-scope="text, record, index">
      <span>{{ (pagination.current - 1) * pagination.pageSize + index + 1 }}</span>
    </template>
        <template slot="operation" slot-scope="text, record, index">
          <div class="editable-row-operations">
            <a-space size="small">
              <a-button
                size="small"
                v-action:vmenu:info
                @click="() => info(record)"
              >
                详情
              </a-button>
              <a-button
                size="small"
                type="primary"
                v-action-dauth:[{...record,auth:`vmenu:edit`}]
                @click="() => edit(record)"
              >
                编辑
              </a-button>
              <a-button
                size="small"
                type="danger"
                v-action-dauth:[{...record,auth:`vmenu:del`}]
                @click="() => del(record)"
              >
                删除
              </a-button>
            </a-space>
          </div>
        </template>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import { mapState } from 'vuex'
import { getListPage, delData, updateStatus } from '@/api/customize/vmenu'
import { findDataAuth } from '@/core/baseAction.js'
import storage from 'store'
import EditForm from './Edit'
import InfoForm from './Info'
const columns = [
   {
    title: '序号',
    align: 'center',
    width: 70,
    scopedSlots: { customRender: 'dataIndex' }
  },
  {
    title: '模块ID',
    dataIndex: 'id',
    ellipsis: true,
  },
  {
    title: '模块名称',
    dataIndex: 'name',
    ellipsis: true,
  },
  {
    title: '表单名称',
    dataIndex: 'table_comment',
    ellipsis: true,
  },
  // {
  //   title: "状态类型",
  //   dataIndex: "status_type",
  //   ellipsis: true,
  //   customRender: (text, row, index) => {
  //     if (text == "0") {
  //       return "未开启";
  //     } else if (text == "1") {
  //       return "单启用";
  //     } else if (text == "2") {
  //       return "多启用";
  //     }
  //   },
  // },
  {
    title: '流程定义',
    dataIndex: 'process_id',
    ellipsis: true,
    customRender: (text, row, index) => {
      if (row.open_process == '0') {
        return row.process_id
      } else {
        return '未开启'
      }
    },
  },
  {
    title: '创建时间',
    dataIndex: 'create_time',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
    width: '190px',
  },
]

export default {
  data () {
    return {
      data: [],
      pagination: {
        "show-total": (total) => `共 ${total} 条`,
        current: 1,
        pageSize: 10,
      },
      loading: false,
      columns,
      selectedRows: [],
      queryParam: {},
    }
  },
  components: {
    EditForm,
    InfoForm,
  },
  computed: {
    ...mapState({
      // 动态主路由
    }),
    rowSelection () {
      return {
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRows = selectedRows
        },
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name,
          },
        }),
      }
    },
  },
  mounted () {
    this.fetch({ pageSize: 10 })
  },
  methods: {
    handleTableChange (pagination, filters, sorter) {
      console.log(pagination)
      const pager = { ...this.pagination }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        pageSize: pagination.pageSize,
        pageNum: pagination.current,
        ...filters,
        ...this.queryParam
      })
    },
    fetch (params = {}) {
      this.loading = true
      getListPage({ ...params }).then((response) => {
        const pagination = { ...this.pagination }
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = response.data.data.total
        this.loading = false
        this.data = response.data.data.rows
        this.pagination = pagination
      })
    },
        fetchsearch (params = {}) {
      this.loading = true
      this.pagination.current=1
      getListPage({ ...params }).then((response) => {
        const pagination = { ...this.pagination }
        // Read total count from server
        // pagination.total = data.totalCount;
        pagination.total = response.data.data.total
        this.loading = false
        this.data = response.data.data.rows
        this.pagination = pagination
      })
    },
    info (record) {
      this.$dialog(
        InfoForm,
        // component props
        {
          record,
          on: {
            ok () {
              that.fetch({ pageSize: 10 })
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            },
          },
        },
        // modal props
        {
          title: '详情',
          width: 1000,
          centered: true,
          maskClosable: true,
          footer: '',
        },
      )
    },
    edit (record) {
      this.dialogData(record)
    },
    del (record) {
      this.delData(record.id)
    },
    add () {
      this.dialogData({})
    },
    edits () {
      if (this.selectedRows.length == 1) {
        const record = this.selectedRows[0]
        if (findDataAuth(record)) {
          this.dialogData(record)
        } else {
          this.$message.warning('没有编辑权限,请选择其他数据进行编辑。')
        }
      } else {
        this.$error({
          title: '提示：',
          content: '请选择一条数据进行编辑。',
          okText: '确认',
        })
      }
    },
    dels () {
      if (this.selectedRows.length > 0) {
        let delBol = true
        for (let i = 0; i < this.selectedRows.length; i++) {
          const record = this.selectedRows[i]
          if (!findDataAuth(record)) {
            delBol = false
          }
        }
        if (!delBol) {
          this.$message.warning(
            '批量删除中存在没有删除权限的数据，请重新选择。',
          )
          return
        }
        const ids = this.selectedRows.map((map) => {
          return map.id
        })
        this.delData(ids)
      } else {
        this.$error({
          title: '提示：',
          content: '请选择需要删除的数据。',
          okText: '确认',
        })
      }
    },
    dialogData (record) {
      const that = this
      record = {
        ...record,
      }
      this.$dialog(
        EditForm,
        // component props
        {
          record,
          on: {
            ok () {
              that.fetch({ pageSize: 10 })
              console.log('ok 回调')
            },
            cancel () {
              console.log('cancel 回调')
            },
            close () {
              console.log('modal close 回调')
            },
          },
        },
        // modal props
        {
          title: '设置菜单模块',
          width: 1000,
          centered: true,
          maskClosable: true,
          okText: '确认',
          cancelText: '取消',
        },
      )
    },
    delData (ids) {
      const that = this
      that.$confirm({
        title: '确定要删除选择的数据吗?',
        content: (h) => <div style="color:red;">数据删除后不可恢复</div>,
        okText: '确认',
        cancelText: '取消',
        onOk () {
          delData(ids).then((response) => {
            if (response.status == 200) {
              that.$success({
                title: '提示：',
                content: '数据删除成功',
              })
              that.fetch({ pageSize: 10 })
            } else {
              that.$error({
                title: '提示：',
                content: '数据删除失败',
              })
            }
          })
          console.log('OK：' + ids)
        },
        onCancel () {
          console.log('Cancel')
        },
      })
    },
  },
}
</script>
<style scoped>
</style>
